<script lang="ts" context="module">
  import type { Column, TableContext } from "./conf";
  import { getContext } from 'svelte';
  import { DropdownButton } from "@component/dropdown";
</script>
<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  export let col: Column;
  export let value = "";
  export let entries: Record<string, any> = []
  let oldVal = value;
  const { isDirty$, isEditingRowDataState$: isEditRowDataValid$ } = getContext<TableContext>('table')
  const dispatch = createEventDispatcher();
  function handleClick (val) {
    console.log('oldVal=>', oldVal)
    if (val !== oldVal) {
      isDirty$.set(true)
      dispatch("update-cell", {
        cellKey: col.key,
        val,
      });
    }
  }
</script>
<div>
  <DropdownButton direction="lt" --dd-content-height={col.options?.dropdownOption?.dropdownHeight || null} >
    <div class="w-full text-xl dropdown-cell" slot="button-content" >{entries?.[value] || "" }</div>
    <ul>
      {#each Object.entries(entries) as [key, text] }
        <!-- svelte-ignore a11y-click-events-have-key-events -->
        <li class="ddb-item" on:click={() => handleClick(key)} >{text}</li>
      {/each}
    </ul>
  </DropdownButton>
</div>